{% extends "pc/base.html" %}
{% load cms_tags %}

{% block title %}实时优惠{% endblock title %}

{% block custom_css_js %}
<link href="/static/css/common.css" rel="stylesheet">
<script src="//img.ztm.me/js/underscore/underscore-min.js"></script>
<style type="text/css">
.item {
  padding: 13px 14px 15px;
  background-color: #fff;
  width: 228px;
  height: 420px;
  float: left;
  display: block;
  padding-top:5px;
  margin-bottom: 6px;
  overflow: hidden;
  color:#444;
  margin-right: 6px;
}

.item img {
  clear: both;
  display: block;
  margin:auto;
}

.feed-ver-title {
    height: 44px;
    margin-top: 4px;
    margin-bottom: 4px;
    overflow: hidden;
}

.feed-ver-descripe {
    font-size: 12px;
    color: #a5a5a5;
    line-height: 18px;
    height: 72px;
    margin: 11px 0;
    overflow: hidden;
}
.filter-wrap.filter-faxian {
    background-color: transparent;
}
.filter-wrap.filter-faxian #filter-block {
    padding-top: 20px;
    margin-top: -40px;
    padding-bottom: 20px;
}
.filter-row {
    padding: 7px 0;
    background-color: #fff;
    border-top: 1px solid #f5f5f5;
    font-size: 12px;
}
.filter-row .cate-operate {
    float: right;
    margin-top: 3px;
    margin-right: 14px;
}
.filter-row .filter-row-con {
    padding-left: 14px;
    overflow: hidden;
    font-size: 0;
    white-space: nowrap;
}
.filter-row .filter-row-con>div {
    display: inline-block;
    font-size: 12px;
    vertical-align: middle;
}
.filter-row .filter-item-title {
    width: 48px;
    height: 20px;
    padding-right: 20px;
    margin-right: 7px;
    border-right: 1px solid #f5f5f5;
    line-height: 20px;
    text-align: right;
    color: #666;
}
.filter-row .filter-row-con>div {
    display: inline-block;
    font-size: 12px;
    vertical-align: middle;
}
.filter-row .filter-items {
    margin-right: 84px;
    white-space: normal;
    overflow: hidden;
}
.filter-row .filter-row-con>div {
    display: inline-block;
    font-size: 12px;
    vertical-align: middle;
}
.filter-row .filter-items {
    margin-right: 84px;
    white-space: normal;
    overflow: hidden;
}
.filter-row .filter-items>div>a {
    color: #333;
}
.filter-row .filter-items .drop-menus a, .filter-row .filter-items>div>a {
    -webkit-border-radius: 2px;
    border-radius: 2px;
}
.filter-row .filter-items .drop-menus a, .filter-row .filter-items>div>a, .filter-row .filter-items>div>span {
    position: relative;
    display: inline-block;
    margin: 0 8px;
    padding: 7px 5px;
    white-space: nowrap;
    font-size: 12px;
}
</style>
{% endblock %}

{% block pc_content %}

  <div class="filter-wrap filter-faxian">
    <div id="filter-block">
      <div class="filter-row J_filter_row">
        <div class="filter-row-con">
          <div class="filter-item-title" _hover-ignore="1">分类</div>
          <div class="filter-items J_filter_items" style="height: 28px;">
            <div>
              <a href="/youhui/">所有</a>
              {% for category in category_list %}
                <a href="/youhui/category/{{category.pinyin}}/">{{category.name}}</a>
              {% endfor %}
            </div>
          </div>
        </div>
      </div>
      <div class="filter-row J_filter_row">
        <div class="cate-operate">
          <a href="javascript:;" class="z-btn-more J_filter_expand" style="display: none;">更多<i class="arrow-down"></i></a>
        </div>
        <div class="filter-row-con">
          <div class="filter-item-title">商城</div>
          <div class="filter-items J_filter_items" style="height: 28px;">
            <div>
              <a href="/youhui/">所有</a>
              {% for mall in mall_list %}
                <a href="/youhui/mall/{{mall.pinyin}}/">{{mall.name}}</a>
              {% endfor %}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
<div class="container">
  <div class="row row-offcanvas row-offcanvas-right">
    <div class="col-xs-12 col-sm-12">
      {% if current_page_items %}
      <div class="row">
        {% for item in current_page_items %}
        <div class="item">
          <div class="feed-ver-pic">
            <a href="/youhui/detail/{{ item.id }}/">
            <img src="/static/img/loading.gif" data-src="{% if item.qiniu_pic %}{{ item.qiniu_pic }}{% else %}//img.ztm.me/img/noimg.png{% endif %}" alt="{{item.article_title|safe}}" {% if item.article_pic_style %} {{item.article_pic_style|safe}} {% else %} width="200px" height="200px" style="margin-top:0px" {% endif %} />
            </a>
          </div>
          <h5 class="feed-ver-title">{{item.article_title|safe}}</h5>
          <div title="{{item.article_date}}~{{item.create_at|date:"H:i"}}" class="z-highlight z-ellipsis" _hover-ignore="1">{{item.article_price}}</div>
          <div class="feed-ver-descripe">{{item.article_summary|safe}}</div>
          <p>
            <a class="btn btn-default alignleft" target="_blank" href="/youhui/mall/{{item.article_mall.pinyin}}/">{{item.article_mall.name|truncatechars:9}}</a>
            {% if item.article_mall.name == '京东' or item.article_mall.name == '京东众筹' %}
            <!--<a class="btn btn-danger alignright" target="_blank" href="https://www.linkstars.com/click.php?feedback=156_0_3117__ztm&to=https%3A%2F%2Fitem.jd.com%2F{{item.commodity_sku}}.html">去购买</a>-->
            <a class="btn btn-danger alignright" target="_blank" href="{{item.commodity_url_refer}}">去购买</a>
            {% elif item.article_mall.name == '京东全球购' %}
            <!--<a class="btn btn-danger alignright" target="_blank" href="https://www.linkstars.com/click.php?feedback=156_0_3117__ztm&to={{item.commodity_url|urlencode:""}}">去购买</a>-->
            <a class="btn btn-danger alignright" target="_blank" href="{{item.commodity_url_refer}}">去购买</a>
            {% elif item.article_mall.name == '苏宁易购' or item.article_mall.name == '苏宁易购海外购' %}
            <!--<a class="btn btn-danger alignright" target="_blank" href="https://www.linkstars.com/click.php?feedback=150_0_3117__ztm&to={{item.commodity_url|urlencode:""}}">去购买</a>-->
            <a class="btn btn-danger alignright" target="_blank" href="{{item.commodity_url_refer}}">去购买</a>
            {% elif item.article_mall.name == '网易考拉海购' or item.article_mall.name == '网易考拉' or item.article_mall.name == '网易严选' %}
            <!--<a class="btn btn-danger alignright" target="_blank" href="https://www.linkstars.com/click.php?feedback=42_0_3117__ztm&to={{item.commodity_url|urlencode:""}}">去购买</a>-->
            <a class="btn btn-danger alignright" target="_blank" href="{{item.commodity_url_refer}}">去购买</a>
            {% elif item.article_mall.name == '1号店' %}
            <!--<a class="btn btn-danger alignright" target="_blank" href="https://www.linkstars.com/click.php?feedback=73_0_3117__ztm&to={{item.commodity_url|urlencode:""}}">去购买</a>-->
            <a class="btn btn-danger alignright" target="_blank" href="{{item.commodity_url_refer}}">去购买</a>
            {% elif item.article_mall.name == '国美在线' or item.article_mall.name == '国美' %}
            <a class="btn btn-danger alignright" target="_blank" href="{{item.commodity_url_refer}}">去购买</a>
            {% elif item.article_mall.name == '中粮我买网' %}
            <a class="btn btn-danger alignright" target="_blank" href="{{item.commodity_url_refer}}">去购买</a>
            {% elif item.article_mall.name == '当当' or item.article_mall.name == '当当海外购' %}
            <a class="btn btn-danger alignright" target="_blank" href="{{item.commodity_url_refer}}">去购买</a>
            {% elif item.article_mall.name == 'bodyguard apotheke中文官网' %}
            <a class="btn btn-danger alignright" target="_blank" href="{{item.commodity_url_refer}}">去购买</a>
            {% elif item.article_mall.name == '德国药房apo.com' %}
            <a class="btn btn-danger alignright" target="_blank" href="{{item.commodity_url_refer}}">去购买</a>
            {% else %}
            <a class="btn btn-warning alignright" target="_blank" href="{% if item.commodity_url %}{{item.commodity_url}}{% endif %}">去购买</a>
            {% endif %}
          </p>
        </div>
        {% endfor %}
      </div><!--/row-->
      {% endif %}
    </div><!--/.col-xs-12.col-sm-9-->
    <ul class="pagination">
      {% if current_page_items %}
        {% for p in page_range %}
          {% if p == page %}
            <li class="active"><a href="?page={{p}}">{{p}}</a></li>
          {% else %}
            <li><a href="?page={{p}}">{{p}}</a></li>
          {% endif %}
        {% endfor %}
      {% endif %}
    </ul>

  </div><!--/row-->
</div><!--/.container-->
<script>
// 注意: 需要引入jQuery和underscore
$(function() {
    // 获取window的引用:
    var $window = $(window);
    // 获取包含data-src属性的img，并以jQuery对象存入数组:
    var lazyImgs = _.map($('img[data-src]').get(), function (i) {
        return $(i);
    });
    // 定义事件函数:
    var onScroll = function() {
        // 获取页面滚动的高度:
        var wtop = $window.scrollTop();
        // 判断是否还有未加载的img:
        if (lazyImgs.length > 0) {
            // 获取可视区域高度:
            var wheight = $window.height();
            // 存放待删除的索引:
            var loadedIndex = [];
            // 循环处理数组的每个img元素:
            _.each(lazyImgs, function ($i, index) {
                // 判断是否在可视范围内:
                if ($i.offset().top - wtop < wheight) {
                    // 设置src属性:
                    $i.attr('src', $i.attr('data-src'));
                    // 添加到待删除数组:
                    loadedIndex.unshift(index);
                }
            });
            // 删除已处理的对象:
            _.each(loadedIndex, function (index) {
                lazyImgs.splice(index, 1);
            });
        }
    };
    // 绑定事件:
    $window.scroll(onScroll);
    // 手动触发一次:
    onScroll();
  })
</script>
{% endblock %}
